<template>
	<div class="system-dept-dialog-container energy-dialog energy-from">
		<el-dialog center align-center v-model="state.dialog.isShowDialog" width="35%" @close="resetData">
			<template #header="{ titleClass }">
				<div :class="titleClass">{{ state.dialog.title }}</div>
			</template>

			<el-form ref="deptDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="上级部门">
							<el-cascader
								class="w100"
								placeholder="请选择部门"
								v-model="state.ruleForm.parentId"
								:disabled="state.dialog.isAdd && state.ruleForm.parentId !== ''"
								:options="state.deptData"
								:props="{
									checkStrictly: true,
									emitPath: false,
									value: 'id',
									label: 'deptName',
								}"
								@change="changeSelected"
								clearable
							>
								<template #default="{ node, data }">
									<span>{{ data.deptName }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="部门名称">
							<el-input v-model="state.ruleForm.deptName" placeholder="请输入部门名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="负责人">
							<el-input v-model="state.ruleForm.leaderUserId" placeholder="请输入负责人" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="手机号">
							<el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="排序">
							<el-input v-model="state.ruleForm.sort" controls-position="right" placeholder="请输入排序" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="部门状态">
							<el-radio-group v-model="state.ruleForm.status">
								<el-radio :label="0">正常</el-radio>
								<el-radio :label="1">停用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="flex row-center mt10 mb10">
				<div class="btn1" @click="onSubmit">
					<el-icon> <ele-Check /> </el-icon><span class="ml6">{{ state.dialog.submitTxt }}</span>
				</div>
				<div class="btn3 ml10" @click="onCancel">
					<el-icon> <ele-Close /> </el-icon><span class="ml6">取 消</span>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemDeptDialog">
import { reactive, ref, nextTick } from 'vue';
import { useDeptApi } from '/@/api/system/dept/index';
import { ElNotification } from 'element-plus';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const deptDialogFormRef = ref();
const state: any = reactive({
	ruleForm: {
		id: '',
		parentId: '', // 父部门ID
		deptName: '', // 部门名称
		leaderUserId: '', // 负责人
		phone: '', // 手机号
		sort: '', // 排序
		status: 0, // 部门状态
	},
	deptData: [], // 部门数据
	dialog: {
		isShowDialog: false,
		isAdd: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

// 打开弹窗
const openDialog = (type: string, row: any) => {
	if (type === 'edit') {
		state.ruleForm = { ...row };
		state.dialog.title = '修改部门';
		state.dialog.submitTxt = '修 改';
		state.dialog.isAdd = false;
	} else {
		state.dialog.title = '新增部门';
		state.dialog.submitTxt = '新 增';
		state.dialog.isAdd = true;
		if (row) {
			state.ruleForm.parentId = row.id;
			state.ruleForm.status = 0;
		}
	}
	state.dialog.isShowDialog = true;
	getMenuData();
};

//
const changeSelected = (val: any) => {
	console.log(val, 'val');
};

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

// 表单清空
const resetData = () => {
	nextTick(() => {
		deptDialogFormRef.value.resetFields();
		state.ruleForm = {
			id: '',
			parentId: '', // 父部门ID
			deptName: '', // 部门名称
			leaderUserId: '', // 负责人
			phone: '', // 手机号
			sort: '', // 排序
			status: 0, // 部门状态
		};
	});
};

// 新增部门
const doAdd = async () => {
	const data = await useDeptApi().addDept(state.ruleForm);
	if (data.code == 200) {
		ElNotification({
			title: '提示',
			message: '新增部门成功',
			position: 'top-right',
			type: 'success',
		});
		emit('refresh');
	}
};

// 编辑用户
const doEdit = async () => {
	const data = await useDeptApi().updateDept(state.ruleForm);
	if (data.code == 200) {
		ElNotification({
			title: '提示',
			message: '修改部门成功',
			position: 'top-right',
			type: 'success',
		});
		emit('refresh');
	}
};

// 提交
const onSubmit = () => {
	deptDialogFormRef.value.validate((valid: any) => {
		if (valid) {
			state.dialog.isAdd ? doAdd() : doEdit();
		} else {
			ElNotification({
				title: '提示',
				message: '校验失败,请填写完整岗位信息',
				position: 'top-right',
				type: 'error',
			});
		}
		closeDialog();
	});
};

// 初始化部门数据
const getMenuData = async () => {
	const { data } = await useDeptApi().getListDept({});
	state.deptData = data;
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
